iT邦幫忙

DAY 10
1

Sass3.3 & CSS設計模式系列 第 11

Sass教學 (10) - susy2 - 設計不對稱(Asymmetrical) RWD Grid

  • 分享至 

  • xImage
  •  

Yes
影片教學請點選下圖連結↓

以下文章同步於Github

這章是要來講使用isolate來設定不對稱的 RWD Grid,
像有些網頁設計師會覺得不希望版型都是死板板固定欄寬,
如果希望是設計左2欄寬、中8欄寬、右2欄寬,總計三欄的Gird,
那就相當適合使用isolate來設計Grid。

程式碼連結
sassmeister-程式碼範例

進入主題
如果我要設定12欄,每欄欄寬都固定對稱的Grid,
設定方式自然就像這樣子:

$susy:(
  columns: 12,
  gutter-position: after,
  column-width: 60px,
  gutters: 1/3,
  debug:(image:true)
)

畫面就會如下:

但如果希望是設計左2欄寬、中8欄寬、右2欄寬,總計三欄的Gird, 就可以這樣子設定:

$susy:(
  columns: (2,8,2),   //數字為欄寬,共3欄
  output: isolate // 預設是float
  gutter-position: after,
  column-width: 60px,
  gutters: 1/3,
  debug:(image:true)
)

畫面就會變成這個樣子:

設計出Grid出來後,
假如你要將自己設計的div排到自己想要的位置上,
也是使用span這個Mixin, 假設我新增一個.at1的DIV,
要讓他寬度一共佔住2、3欄,那就必須這樣寫:

.at1{
  @include span(2 at 2) 
  // 2是佔2欄,at 2是代表這個div會定位到從左數來第二欄位
  //試著改裡面的數值就可了解他所代表的意思
}
//編譯出來的CSS
.at1{
  width: 81.5789473684%;
  float: left;
  margin-left: 18.4210526316%;
  margin-right: -100%;
}
//由於sass map是使用 `output:isolate`的方式來設定,  
//所以grid推移上也變化成這個樣子。

就會變成下圖的樣子:

再來如果你需要在.at1裡面設定左右欄各佔1column div的話,
就必須這樣子寫:

.at1{
  @include span(2 at 2){
    .at2{
      @include span(1 at 1) //佔1欄,at 1定位在第一欄
    }
    .at3{
      @include span(1 at 2) //佔1欄,at 2定位在第二欄
    }
  } 
}
// @span(){@content},這樣`span`裡面的程式碼就會依照.at1所下的寬度來對應.at2與.at3編譯出來的寬度。

編譯出來就會變成如下圖:

透過這樣的方式,
你就可以設定自己的不對稱版型出來,
然後再藉由susy-breakpoint將自己設定的不對稱 Sass maps帶進去layout裡面,
你就可以靈活地設定不對稱 RWD版型出來了,
這裡也做了一個 不對稱的RWD Grid,提供大家參考與學習。


上一篇
Sass教學 (9) - susy2 - 透過susy breakpoint、layout設計RWD Grid
下一篇
Sass教學 (11) - @content
系列文
Sass3.3 & CSS設計模式46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言